<!--时间组件 -->
<template>
  <div class="box">
    <span>
      {{ time }}
    </span>
    <div class="xiao">
      <span>{{ yy }}</span>
      <span>{{ ss }}</span>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data() {
    return {
      time: '',
      ss: '',
      yy: ''
    }
  },
  methods: {
    timer() {
      const hh = dayjs().hour()
      const mm =
        dayjs().minute() < 10 ? '0' + dayjs().minute() : dayjs().minute()
      const ss =
        dayjs().second() < 10 ? '0' + dayjs().second() : dayjs().second()
      const yy = dayjs().month() < 10 ? '0' + dayjs().month() : dayjs().month()
      const day = dayjs().date() < 10 ? '0' + dayjs().date() : dayjs().date()
      this.yy = `${yy}/${day}`
      this.time = `${hh}:${mm}`
      this.ss = `${ss}`
    }
  },
  mounted() {
    this.timer()
    setInterval(() => {
      this.timer()
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: keai;
  src: url(@/font/No.018-Sounso-Pastoral-2.ttf);
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  background-image: url(@/assets/bgi.png);
  // background-color: #daa45a;
  box-shadow: -3px 2px 6px 1px #a3a3a3;
  border-radius: 10px;
  height: 150px;
  width: 250px;

  font-family: keai;
  font-size: 40px;
  color: #fafafa;
}
.xiao {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  font-size: 19px;
  margin-left: 10px;
}
</style>
